<template>
  <div class="add">
    <div class="title">
      <h2>产品新增/编辑</h2>
    </div>
    <!-- 编辑 -->
    <div v-show="!isShowID">
      产品名称:
      <input type="text" v-model="Obj.pname" />
      <br />
      产品编号:
      <input type="text" v-model="Obj.id" :disabled="!isShowID" /><br />
      <span>&nbsp;&nbsp;</span> 成本价:
      <input type="text" v-model="Obj.price" /><br />
      <span>&nbsp;&nbsp;&nbsp;</span>库存数:
      <input type="text" v-model="Obj.count" /><br />
      <span>&nbsp;&nbsp;&nbsp;</span>登记人:
      <input type="text" v-model="Obj.user" /><br />
      <div class="btn">
        <button @click="keep2(Obj)">保存</button>
        <button @click="none">取消</button>
      </div>
    </div>
    <div v-show="isShowID">
      产品名称:
      <input type="text" v-model="name1" placeholder="联想笔记本电脑" /> <br />
      产品编号:
      <input type="text" v-model="num1" :placeholder="arr.length + 1" /><br />
      <span>&nbsp;&nbsp;</span> 成本价:
      <input type="text" v-model="price1" placeholder="8000" /><br />
      <span>&nbsp;&nbsp;&nbsp;</span>库存数:
      <input type="text" v-model="much1" placeholder="30" /><br />
      <span>&nbsp;&nbsp;&nbsp;</span>登记人:
      <input type="text" v-model="person1" placeholder="里斯" /><br />
      <div class="btn">
        <button @click="keep">保存</button>
        <button @click="none">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      isShowID: true,
      //编辑
      name1: "",
      num1: "",
      price1: "",
      much1: "",
      person1: "",
    };
  },
  computed: {
    ...mapState(["name", "num", "price", "much", "person", "arr"]),
    // 返回一个对象
    //编辑
    Obj() {
      let object = {};
      this.arr.forEach((item) => {
        if (item.id + "" === this.$route.query.id) {
          object = item;
          this.isShowID = false;
        }
      });
      return object;
    },
  },
  methods: {
    ...mapMutations(["pushArr"]),
    ...mapMutations(["pushArr2"]),
    keep() {
      if (this.name1 && this.price1 && this.much1 && this.person1) {
        this.pushArr({
          pname: this.name1,
          id: this.arr.length + 1,
          uptDate: new Date(),
          price: this.price1,
          count: this.much1,
          user: this.person1,
          isShow: true,
        });
        this.$router.push("/products");
      } else {
        alert("亲,请输入完整信息");
      }
    },
    //编辑
    keep2(Obj) {
      if (Obj.pname && Obj.price && Obj.count && Obj.user) {
        this.pushArr2({
          pname: Obj.pname,
          id: Obj.id,
          uptDate: new Date(),
          price: Obj.price,
          count: Obj.count,
          user: Obj.user,
          isShow: true,
        });
      }

      this.$router.push("/products");
      this.isShowID = true;
    },
    none() {
      this.$router.push("/products");
      this.isShowID = true;
    },
  },
};
</script>

<style lang='less' scoped>
.add {
  width: 300px;
  margin: 30px auto;
  .title {
    text-align: center;
    h2 {
      line-height: 40px;
    }
  }
  input {
    margin: 7px 0px;
  }
  .btn {
    text-align: center;
  }
  button {
    width: 86px;
    height: 33px;
    margin-right: 10px;
  }
}
</style>